<template>
  <div>
    <div class="personalCenter">
      <!-- 用户信息 左侧 -->
      <div class="personal-center">
        <div class="personal-center-title">
          <span style="margin-left:20px;">About me</span>
        </div>
        <div class="personal-center-image">
          <div class="demo-basic--circle">
            <div class="block"><el-avatar :size="75" :src="circleUrl" /></div>
          </div>
        </div>
        <div class="personal-center-name">
          <span>Admin</span>
        </div>
        <div class="personal-center-id">
          <span>登录账号：</span>
        </div>
        <div class="personal-center-time">
          <span>账号开通时间：</span>
        </div>
      </div>
      <!-- 修改信息 -->
      <div class="personage-userinfo">
        <!-- 选项卡 -->
        <div class="personage-userinfo-tabs">
          <el-tabs v-model="activeName" class="" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first" />
            <el-tab-pane label="修改密码" name="second">
              <div class="change-password">
                <div style="color: #FF0000;text-align: center;margin-top: 40px;">
                  <span>提示：为了您的账号安全，系统建议您每90天修改一次密码</span>
                </div>
                <div style="width: 70%;margin-top:40px">
                  <el-form ref="form" :rules="rules" :model="passwordFrom" label-width="150px">
                    <el-form-item label="原始密码：" prop="original">
                      <el-input v-model="passwordFrom.original" placeholder="请输入原始密码" show-password />
                    </el-form-item>
                    <el-form-item label="新密码：" prop="newpassword">
                      <el-input v-model="passwordFrom.newpassword" placeholder="新密码(8-20，支持数字，字母，下划线)" show-password />
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="affirm">
                      <el-input v-model="passwordFrom.affirm" placeholder="新密码(8-20，支持数字，字母，下划线)" show-password />
                    </el-form-item>
                  </el-form>
                </div>
                <div style="width: 70%;margin-left: 150px;">
                  <el-button>取消</el-button>
                  <el-button type="primary">确认</el-button>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third" />
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      activeName: 'first',
      passwordFrom: {
        original: '',
        newpassword: '',
        affirm: ''
      },
      rules: {
        original: [
          { required: true, message: '请输入原始密码', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        affirm: [
          { required: true, message: '请确认密码', trigger: 'blur' }
        ]

      }
    }
  },
  method: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style>
.personalCenter{
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
}
.personal-center{
    border: 1px solid #E6EBF5;
    width: 30%;
    height: 800px;
    margin: 20px;
    -webkit-box-shadow:0 0 2px #7D7D7D;
    -moz-box-shadow:0 0 2px #7D7D7D;
    box-shadow:0 0 1px #7D7D7D;
}
.personal-center-title{
    border-bottom: 1px solid #E6EBF5;
    height: 80px;
    line-height: 80px;
}
.personal-center-image{
    display: flex;
    justify-content:center;
    height: 100px;
    align-items:center;
}
.personal-center-name{
    display: flex;
    justify-content:center;
    height: 60px;
}
.personal-center-id{
    border-bottom:1px solid #E6EBF5;
    height: 60px;
    line-height: 60px;
    font-size: 13px;
    width: 80%;
    margin: 0 auto;
}
.personal-center-time{
    border-bottom:1px solid #E6EBF5;
    height: 60px;
    line-height: 60px;
    font-size: 13px;
    width: 80%;
    margin: 0 auto;
}
.personage-userinfo{
    border: 1px solid #E6EBF5;
    width: 60%;
    height: 800px;
    margin: 20px;
    -webkit-box-shadow:0 0 2px #7D7D7D;
    -moz-box-shadow:0 0 2px #7D7D7D;
    box-shadow:0 0 1px #7D7D7D;
}
.personage-userinfo-tabs{
    width: 95%;
    margin: 0 auto;
}
.change-password{
    /* border: 1px solid red; */
    height: 300px;
    width: 84%;
}
</style>
